<template>
  <div class="pingxingzuobiao">
    <div ref="chart" class="thechart"></div>
  </div>
</template>
<script>
import axios from "axios";
import randomcolor from "randomcolor";
import Color from "color";
let clipboardjs = require("clipboard");

const libDP = require("../lib/Douglas-Peucker");
import * as echarts from "echarts";

const MAP_IMAGES = {
  Vikendi:
    "http://n1-q.mafengwo.net/s16/M00/1F/16/CoUBUl6J6-WAfTq9ABN1dkMMLI4971.jpg#DihorOtok_Main",
  "Erangel (Remastered)":
    "http://n1-q.mafengwo.net/s16/M00/24/CD/CoUBUl6J8CGAZ8FWACwGssFmNzs911.jpg#Baltic_Main.jpg.jpg",
  Miramar:
    "http://b1-q.mafengwo.net/s16/M00/25/07/CoUBUl6J8DuABPwhAB3VGbsEWx0692.jpg#Desert_Main.jpg.jpg",
  Erangel:
    "http://n1-q.mafengwo.net/s16/M00/25/14/CoUBUl6J8E-AbIDmABcvo6NWiPE512.jpg#Erangel_Main.jpg.jpg",
  Sanhok:
    "https://qimage.owhat.cn/prod/master/image/e998aac9-462c-46ce-9c96-0e9506af0da5#Sanhok_Main_High_Res.jpg"
};
const MAP_LENGTH_CENTIMETERS = {
  Vikendi: 612000,
  "Erangel (Remastered)": 816000,
  Miramar: 816000,
  Erangel: 816000,
  Sanhok: 408000
};

const MAP_NAME = "Sanhok";
const MapGameLength = MAP_LENGTH_CENTIMETERS[MAP_NAME];
const MapSize = 1000;
let _scale = MapSize / MapGameLength;
export default {
  name: "Pingxingzuobiao",
  data() {
    return {};
  },
  async mounted() {
    let vue = this;
    let ele = this.$refs["chart"];
    let chart = echarts.init(ele, "", {
      renderer: "canvas"
    });
    var schema = [
      // { name: "killed", index: 0, text: "玩家被杀" },
      { name: "distance_min", index: 0, text: "最小距离" },
      { name: "is_in_zone", index: 1, text: "在城内" },
      { name: "distance_a", index: 2, text: "距离A" },
      { name: "distance_b", index: 3, text: "距离B" },
      { name: "distance_c", index: 4, text: "距离C" },
      { name: "distance_d", index: 5, text: "距离D" },
      {
        name: "ranking",
        index: 6,
        text: "队伍排名"
      },
      { name: "is_gaoshou", index: 7, text: "是高手玩家" }
    ];

    let grid_sssssize = 1280;
    let gridPosition = {
      left: 0,
      // right: 10,
      // bottom: 300,
      top: 10,
      width: grid_sssssize,
      height: grid_sssssize
    };
    let seriesTest = {
      type: "scatter",
      data: [
        [0, 0],

        [408000, 408000]
      ]
    };
    let serieses = await this.getSerieses();

    chart.setOption({
      backgroundColor: "transparent" || "white",
      color: ["#c23531", "#91c7ae", "#dd8668"],
      brush: {
        brushLink: "all",
        xAxisIndex: [0],
        yAxisIndex: [0],
        toolbox: ["rect", "polygon", "keep", "clear",'lineX','lineY'],
        inBrush: {
          opacity: 1,
          colorSaturation: 1
        },
        outOfBrush: {
          opacity: 0.1,
          symbolSize: 8,
          colorSaturation: 0
        },
        brushStyle: {
          borderWidth: 1,
          color: "rgba(0,0,180,0.2)",
          borderColor: "rgba(120,140,180,0.8)"
        },
        throttleType: "debounce",
        throttleDelay: 1000
      },
      tooltip: {
        trigger: "item"
      },
      dataZoom: [
        { type: "inside", xAxisIndex: [0], filterMode: "none" },
        { type: "inside", yAxisIndex: [0], filterMode: "none" },
        { type: "inside", xAxisIndex: [1] },
        { type: "inside", yAxisIndex: [1] }
      ],
      grid: [
        { ...gridPosition, show: true, backgroundColor: "black", z: -200 },
        {
          top: 0,
          left: gridPosition.left + gridPosition.width,
          bottom: 0,
          right: 0,
          show: true,
          backgroundColor: "rgba(255,255,255,0.8)"
        },
        {
          // top: 0,
          left: gridPosition.left + gridPosition.width,
          bottom: 20,
          height: 500,
          right: 10,
          show: true,
          backgroundColor: "rgba(255, 255,255,0.8)"
          // z: 100
        }
      ],
      xAxis: [
        {
          type: "value",
          max: MapGameLength,
          splitLine: {
            show: false
          },
          axisLine: {},
          gridIndex: 0
        },
        {
          type: "value",

          splitLine: {
            show: true
          },
          inverse: false,
          gridIndex: 2
        }
      ],
      yAxis: [
        {
          type: "value",
          max: MapGameLength,
          splitLine: {
            show: false
          },
          inverse: true,
          gridIndex: 0
        },
        {
          type: "value",

          splitLine: {
            show: true
          },
          inverse: false,
          gridIndex: 2
        }
      ],
      parallel: {
        // left: "15px",
        background: "white",
        right: "15px",
        bottom: 550,
        top: 25,
        width: 400,
        layout: "vertical"
      },
      parallelAxis: [
        {
          dim: 0,
          name: schema[0].text,
          inverse: true,
          nameLocation: "end"
          // type: "category",
          // data: [true, false]
        },
        {
          dim: 1,
          name: schema[1].text,
          nameLocation: "end",
          inverse: true,
          type: "category",
          data: ["true", "false"]
        },
        { dim: 2, name: schema[2].text, nameLocation: "end", inverse: true },
        { dim: 3, name: schema[3].text, nameLocation: "end", inverse: true },
        { dim: 4, name: schema[4].text, nameLocation: "end", inverse: true },
        { dim: 5, name: schema[5].text, nameLocation: "end", inverse: true },
        {
          dim: 6,
          name: schema[6].text,
          max: 100,
          minInterval: 5,
          splitNumber: 100 / 5,
          nameLocation: "end",
          inverse: true
        },
        {
          dim: 7,
          name: schema[7].text,
          nameLocation: "end",
          inverse: true,
          type: "category",
          data: ["true", "false"]
        }
      ].map(e => {
        e.axisLine = {
          lineStyle: {
            color: "black"
          }
        };
        return e;
      }),
      graphic: [
        // {
        // type: "image",
        // id: "logo",
        // ...gridPosition,
        // z: -10,
        // bounding: "raw",
        // origin: [0, 5],
        // style: {
        //   image: MAP_IMAGES[MAP_NAME],
        //   width: gridPosition.width,
        //   height: gridPosition.height,
        //   opacity: 0.8
        // }
        // }
      ],
      series: [...serieses]
    });
    chart.on("brushselected", params => {
      if (
        params.batch &&
        params.batch[0] &&
        params.batch[0].areas &&
        params.batch[0].areas[0]
      ) {
        debugger;
      }
      // debugger
    });
  },
  methods: {
    ajaxData0223() {
      let points =
        "https://qimage.owhat.cn/prod/master/image/3ab25909-696d-44bc-9b30-05798ec155aa";
      return new Promise(resolve => {
        axios
          .get(points)
          .then(axresp => {
            resolve(axresp.data);
          })
          .catch(axerr => {
            debugger;
          });
      });
    },
    ajaxDataPytsne() {
      let points =
        "https://qimage.owhat.cn/prod/master/image/d5133349-034e-4319-8fa5-47a26e82e27b"; //没归一化的数据
      points =
        "https://qimage.owhat.cn/prod/master/image/012d1f54-8894-4786-ac0f-5a8cf4a491ed"; //归一化的tsne数据
      return new Promise(resolve => {
        axios
          .get(points)
          .then(axresp => {
            resolve(axresp.data);
          })
          .catch(axerr => {
            debugger;
          });
      });
    },
    async getSerieses() {
      let data = await this.ajaxData0223();
      // debugger;
      let seriesPingxingzuobiao = {
        name: "xxx",
        type: "parallel",
        smooth: 0.1,
        lineStyle: {
          width: 1,
          color: "rgba(197,56,52,0.1)"
          // opacity: 0.1
        },
        inactiveOpacity: 0,
        activeOpacity: 0.2,
        emphasis: {
          lineStyle: {
            color: "green"
          }
        },
        data: data
          // .slice(0, 2000)
          .map(e => {
            // debugger;
            return [
              // Number(e.dev.killed),
              Math.min(
                e.distance_to_city_type_a,
                e.distance_to_city_type_b,
                e.distance_to_city_type_c,
                e.distance_to_city_type_d
              ),
              String(e.is_in_zone),
              e.distance_to_city_type_a,
              e.distance_to_city_type_b,
              e.distance_to_city_type_c,
              e.distance_to_city_type_d,
              e.ranking,
              String(Boolean(e.is_gaoshou))
            ];
          })
      };
      let seriesLuodian = {
        type: "scatter",
        data: data
          // .slice(0, 2000)
          .map(e => [e.luodian.x, e.luodian.y, e.ranking, e.is_in_zone]),

        itemStyle: {
          borderWidth: 1,
          borderColor: "white",
          color: "rgba(0,102,255, 1)",
          opacity: 1
        },
        silent: true,
        animation: false
      };

      let seriesBackground = {
        type: "custom",
        data: [[408000, 0]],
        coordinateSystem: "cartesian2d",
        xAxisIndex: 0,
        yAxisIndex: 0,
        z: -1,
        silent: true,
        renderItem: function(params, api) {
          let x = [408000, 408000];
          // debugger
          let coord1 = api.coord([0, 0]);
          let coord2 = api.coord([408000, 408000]);
          return {
            type: "group",
            children: [
              {
                type: "rect",
                shape: {
                  x: coord1[0],
                  y: coord1[1],
                  width: coord2[0] - coord1[0],
                  height: coord2[1] - coord1[1]
                },
                style: {
                  stroke: "blue",
                  lineWidth: 0.1,
                  fill: "rgba(202,202,235,0)"
                }
              },
              {
                type: "image",
                style: {
                  image: MAP_IMAGES[MAP_NAME],
                  x: coord1[0],
                  y: coord1[1],
                  width: coord2[0] - coord1[0],
                  height: coord2[1] - coord1[1]
                  // fill:"blue"
                }
              }
            ]
          };
        },
        itemStyle: {
          opacity: 0
        }
      };
      let tsneData = await this.ajaxDataPytsne();
      let seriesTsne = {
        type: "scatter",
        data: tsneData
          // .slice(0, 2000)
          .map(e => [e.tsne[0], e.tsne[1], e.is_gaoshou]),
        xAxisIndex: 1,
        yAxisIndex: 1,
        itemStyle: {
          borderWidth: 0,
          borderColor: "white",
          color: params => {
            // debugger
            if (params.value[2]) {
              return "red";
            }
            return "rgba(0,0,0,0)";
          },
          opacity: 0.5
        },
        symbolSize: 5
      };
      return [
        seriesLuodian,
        seriesPingxingzuobiao,
        seriesBackground,
        seriesTsne
      ];
    }
  }
};
</script>
<style lang="less" scoped>
.thechart {
  width: 1800px;
  height: 1300px;
}
</style>